<template>
  <el-card>
    <el-form inline>
      <el-form-item label="职位搜索">
        <el-input v-model="keywords" placeholder="搜索职位名称"></el-input>
      </el-form-item>
      <el-form-item>
        <el-button
          type="primary"
          size="default"
          :disabled="!keywords.length"
          @click="getRoleList"
        >
          搜索
        </el-button>
        <el-button @click="resetValue">重置</el-button>
      </el-form-item>
    </el-form>
  </el-card>
  <el-card style="margin: 10px">
    <el-button @click="addRole" type="primary" icon="Plus">添加职位</el-button>
    <el-table
      v-loading="loading"
      :data="roleList"
      border
      stripe
      style="margin: 15px 0"
    >
      <el-table-column
        label="序号"
        type="index"
        width="80px"
        align="center"
      ></el-table-column>
      <el-table-column label="ID" prop="id"></el-table-column>
      <el-table-column label="职位名称" prop="roleName"></el-table-column>
      <el-table-column label="创建时间" prop="createTime"></el-table-column>
      <el-table-column label="更新时间" prop="updateTime"></el-table-column>
      <el-table-column label="操作" width="400px" align="center">
        <template #default="{ row }">
          <el-button
            @click="setCurPermission(row)"
            type="default"
            size="small"
            icon="User"
          >
            分配权限
          </el-button>
          <el-button
            @click="updateRole(row)"
            type="primary"
            size="small"
            icon="Edit"
          >
            编辑
          </el-button>
          <el-button
            @click="deleteRole(row)"
            type="danger"
            size="small"
            icon="Delete"
          >
            删除
          </el-button>
        </template>
      </el-table-column>
    </el-table>
    <el-pagination
      v-model:current-page="pageNo"
      v-model:page-size="pageSize"
      :page-sizes="[2, 3, 5, 10]"
      :small="true"
      :disabled="!total"
      :background="true"
      layout=" prev, pager, next, jumper,->,sizes,total"
      :total="total"
      @size-change="getRoleList"
      @current-change="getRoleList"
    />
  </el-card>
  <AddOrUpdate ref="addDialog" />
  <RolePermission ref="rolePermission" />
</template>

<script lang="ts" setup>
import AddOrUpdate from './addOrUpdate.vue'
import RolePermission from './setRolePermission.vue'
import { reqRoleList, reqDeleteRole } from '@/api/acl/role/index'
import type { roleObj, ResponseRoleType } from '@/api/acl/role/type'
import { onMounted, ref } from 'vue'
import { ElMessage } from 'element-plus'

// 点击分配权限
const rolePermission = ref() // vc
const setCurPermission = (row: roleObj) => {
  rolePermission.value.getCurInfo(row)
}
// 分页器内容
const pageNo = ref(1)
const pageSize = ref(5)
const total = ref(0)
const keywords = ref('')
const loading = ref(false)
const roleList = ref<roleObj[]>([])
onMounted(() => getRoleList())
const getRoleList = async () => {
  loading.value = true
  const res: ResponseRoleType = await reqRoleList(
    pageNo.value,
    pageSize.value,
    keywords.value,
  )
  loading.value = false
  if (res.code === 200) {
    roleList.value = res.data.records
    total.value = res.data.total
  }
}
// 重置
const resetValue = () => {
  keywords.value = ''
  getRoleList()
}
// 添加
const addDialog = ref()
const addRole = () => {
  addDialog.value.addDialog()
}
// 编辑
const updateRole = (row: roleObj) => {
  addDialog.value.updateDialog(row)
}
// 删除
const deleteRole = async (row: roleObj) => {
  const res = await reqDeleteRole(row.id as number)
  if (res.code === 200) {
    ElMessage.success('删除成功')
    getRoleList()
  }
}
defineExpose({
  getRoleList,
  pageNo,
})
</script>
<script lang="ts">
export default {
  name: 'role',
}
</script>
<style lang="scss" scoped></style>
